<EditForm
    @attributes="AdditionalAttributes"
    confirm-submit
    name="@FormName"
    FormName="@FormName"
    Model="@Model"
    OnSubmit="@OnSubmit">
    @ChildContent
</EditForm>

<SecureScript type="module">
    import { createApp } from 'vue';
    import Modal, { showModal } from './js/modal.mjs';

    const modalEl = document.createElement('div');
    modalEl.id = '@(FormName)-modal-container';
    document.body.appendChild(modalEl);

    createApp(Modal).mount(modalEl);

    document.querySelector('form[name="@(FormName)"]').addEventListener('submit', function (event) {
        event.preventDefault();
        const form = event.target;

        form.checkValidity();

        const submitterName = event.submitter?.getAttribute("name");
        let submitterInput = null;
        
        if(submitterName) {
            submitterInput = document.createElement('input');
            submitterInput.type = 'hidden';
            submitterInput.name = submitterName;
            submitterInput.value = event.submitter?.getAttribute("value");
        }

        showModal({
            show: true,
            onConfirm: () => {
                submitterInput && form.appendChild(submitterInput);
                form.submit();
            },
            title: event.submitter.getAttribute('confirm-title') || 'Are you sure?',
            description: event.submitter.getAttribute('confirm-description') || 'Please confirm your action',
            confirmButtonText: event.submitter.getAttribute('confirm-button-text') || 'Confirm',
            cancelButtonText: event.submitter.getAttribute('cancel-button-text') || 'Cancel'
        });

        return false;
    });
</SecureScript>